<ul class="devui-mention-dropdown" dLoading [showLoading]="loading" [ngClass]="{ 'devui-mention-overlay-top': position === 'top' }">
  <ng-template
    *ngIf="mentionHeaderTemplate"
    [ngTemplateOutlet]="mentionHeaderTemplate"
    [ngTemplateOutletContext]="{ activeIndex: activeIndex, loading: loading }"
  ></ng-template>
  <li
    #items
    *ngFor="let suggestion of suggestions; let i = index"
    class="devui-mention-dropdown-item"
    [class.focus]="i === activeIndex"
    (click)="selectSuggestion(suggestion)"
    (mousedown)="$event.preventDefault()"
  >
    <ng-container *ngIf="mentionItemTemplate; else defaultSuggestion">
      <ng-container [ngTemplateOutlet]="mentionItemTemplate" [ngTemplateOutletContext]="{ $implicit: suggestion }"></ng-container>
    </ng-container>
    <ng-template #defaultSuggestion>{{ suggestion }}</ng-template>
  </li>
  <li class="devui-mention-dropdown-notfound devui-mention-dropdown-item" *ngIf="suggestions.length === 0">
    <span *ngIf="!loading">{{ mentionNotFoundContent }}</span>
  </li>
</ul>
